<template>
  <div class="focus">
    <mytopfun title="我的关注">
      <van-icon name="arrow-left" slot="left" @click="$router.go(-1)" />
      <van-icon
        name="home-o"
        slot="right"
        @click="$router.push({ path: '/index' })"
        style="visibility: hidden"
      />
    </mytopfun>
    <div class="list" v-for="(item, index) in followList" :key="index">
      <div class="box">
        <img :src="item.head_img" alt="" />
        <div class="center">
          <p>{{ item.nickname }}</p>
          <span>{{ item.create_date | getDate }}</span>
        </div>
        <!-- 把用户id，和遍历下标传给函数 -->
        <span @click="unfollwo(item.id, index)">取消关注</span>
      </div>
    </div>
  </div>
</template>

<script>
// 引人头部组件
import mytopfun from "@/components/mytopfun";
// 引入关注api
import { userFollows, user_unfollow } from "@/apis/user";
// 引入axios 获取 基准路径
import axios from "@/utils/myaxios";
// 引入 过滤器
import { getDate } from "@/filter/myfilter.js";
export default {
  components: {
    mytopfun,
  },
  data() {
    return {
      followList: [],
    };
  },
  filters: {
    getDate,
  },
  methods: {
    //   点击后取消关注，然后把数组里面这个关注的人数据删掉，令不用刷新就可以有刷新的效果
    async unfollwo(id, index) {
      let res = await user_unfollow(id);
      console.log(res);
      if (res.data.message == "取消关注成功") {
        this.followList.splice(index, 1);
      }
      this.$toast.success(res.data.message);
    },
  },
  async mounted() {
    let res = await userFollows();
    // console.log(res);
    // this.followList = res.data.data;
    this.followList = res.data.data.map((item) => {
      // 图片没有有无，有给个基准路径，无则给个默认图片
      if (item.head_img) {
        item.head_img = axios.defaults.baseURL + item.head_img;
      } else {
        item.head_img = axios.defaults.baseURL + "uploads/image/default.jpeg";
      }
      return item; //这里返回的是item
    });
    // console.log(this.followList);
  },
};
</script>

<style lang="less" scoped>
.list {
  .box {
    display: flex;
    padding: 25px 10px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    > img {
      display: block;
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      border-radius: 50%;
      padding: 0 10px;
    }
    > .center {
      flex: 1;
      > p {
        line-height: 30px;
        font-size: 14px;
      }
      > span {
        font-size: 12px;
        color: #999;
      }
    }
    > span {
      height: 30px;
      background-color: #eee;
      font-size: 13px;
      border-radius: 30px;
      line-height: 30px;
      padding: 0px 15px;
    }
  }
}
</style>